<template>
  <table class="table-item">
    <thead>
      <tr>
        <td><p>名称</p></td>
        <td><p>现价</p></td>
        <td><p>涨跌额</p></td>
        <td><p>涨跌幅</p></td>
        <td><p>年初至今涨跌幅</p></td>
        <td><p v-if="itemIndex === 3 || itemIndex === 4 || itemIndex === 5">最高价</p><p v-else>最高</p></td>
        <td><p v-if="itemIndex === 3 || itemIndex === 4 || itemIndex === 5">最低价</p><p v-else>最低</p></td>
        <td><p>更新时间</p></td>
      </tr>
    </thead>
    <tbody>
      <transition
        v-for="item of dataList"
        :key="item.name"
        mode="out-in" appear
        :name="item.name"
        enter-active-class="'animated lightSpeedIn'"
        leave-active-class="'animated lightSpeedOut'"
      >
        <tr :key="item.name">
          <td :class="itemIndex === 3 ? 'exchange-td' : ''"><p :class="itemIndex === 3 ? 'exchange-p' : ''"><img v-if="itemIndex === 3" class="flag-image" :src="'static/images/flag/' + item.name + '.jpg'">{{item.name}}</p></td>
          <td><p>{{item.price}}</p></td>
          <td><p :class="item.riseFallPrice>=0 ? 'increase' : 'drop'">{{item.riseFallPrice}}</p></td>
          <td><p :class="item.riseFallRange>=0 ? 'increase' : 'drop'">{{item.riseFallRange}}%</p></td>
          <td><p :class="item.yearRiseFallRange>=0 ? 'increase' : 'drop'">{{item.yearRiseFallRange}}%</p></td>
          <td><p>{{item.maxPrice}}</p></td>
          <td><p>{{item.minPrice}}</p></td>
          <td><p>{{item.date}}</p></td>
        </tr>
      </transition>
    </tbody>
  </table>
</template>
<script>
export default {
  name: 'EastTable',
  props: {
    dataList: Array,
    itemIndex: Number
  },
  data () {
    return {
    }
  }
}
</script>
<style lang="stylus" scoped>
  .exchange-td
    width: 500px
  .increase
    color: red
  .drop
    color: #20e020
  .flag-image
    padding-right: 40px
    padding-left: 120px
    padding-top: 5px
  .table-item
    width: 100%
    margin-left: 0px
    thead
      color: #FFFFFF
      height: 50px
      tr
        width: 100%
        td
          text-align: center
          >p
            display: flex
            justify-content: center
            align-items: center
            font-size: 35px
            height: 60px
    tbody
      color: #ffffff
      margin-top: 50px
      tr
        height: 60px
        td
          height: 60px
          >p
            display: flex
            justify-content: center
            align-items: center
            font-size: 35px
            height: 60px
          .exchange-p
            justify-content: flex-start
</style>
